@keyframes swiper-pagination-bullet
  from
    width 0
  to
    width 100%

@keyframes product-center-side-legend
  from
    transform: scale3d(1, 1, 1)
  to
    transform: scale3d(1.3, 1.3, 1)

// 产品介绍
#product-container
  position fixed
  top 0
  width 100%
  height 100vh

#product-swiper
  .swiper-pagination
    position static
    height 2px
    margin-bottom 90px
    text-align left

  .swiper-pagination-bullet
    position relative
    width 140px
    height 2px
    margin 0 8px
    background-color rgba(247 248 249 50%)
    border-radius 0

    &.swiper-pagination-bullet-active
      &:after
        position absolute
        top 0
        left 0
        width 0
        height 100%
        content ''
        background rgba(247 248 249 90%)
        animation swiper-pagination-bullet 6s linear forwards

  .swiper-slide.swiper-slide-active
    .product-slide__media
      transform scale3d(1, 1, 1)

.product-swiper-pagination
  position absolute
  bottom 15%
  left 5%
  z-index 2
  width 40%

.product-pagination-group
  position relative
  display flex
  justify-content space-between
  width 292px
  transition all .48s

  &:after
    position absolute
    top 20%
    left 50%
    width 1px
    height 60%
    content ''
    border-left 1px solid rgba(255 255 255 30%)

.product-pagination__button
  display flex
  column-gap 15px
  align-items center
  font-size 18px
  line-height 1.4
  color rgba(255 255 255 80%)

  > img
    width 20px

.product-pagination-step
  position absolute
  top 36%
  right 5%
  z-index 2
  text-align center

  &-fraction
    position relative
    display flex
    flex-direction column
    row-gap 18px
    width 100%

    &:after
      position absolute
      top 50%
      left 50%
      display block
      width 40px
      height 1px
      content ''
      background rgba(251, 251, 251, 0.3)
      transform translate(-50%, -50%)

  &-current
  &-total
    display block
    font-size 21px
    line-height 1
    color #fff
  &-line
    position relative
    padding-bottom 170px
    margin 0 auto
    margin-top 50px
    font-size 18px
    font-style normal
    line-height 1
    color rgba(255 255 255 60%)
    writing-mode tb-rl

    &:after
      position absolute
      bottom 0
      left 50%
      width 1px
      height 160px
      content ''
      background rgba(251, 251, 251, 0.3)
      transform translateX(-50%)

  > img
    width 30px
    margin-top 50px

.product-slide
  position relative
  height 100%

  &__media
    width 100%
    height 100%
    transition-duration 6s
    transition-property all
    transform scale3d(1.1, 1.1, 1)
    object-fit cover

  &-inner
    position absolute
    bottom 33%
    left 5%
    width 42%

  &__model
    display block
    font-size 36px
    line-height 1.4
    color rgba(255 255 255 90%)
    text-transform uppercase

  &__title
    display block
    margin-bottom 18px
    font-size 56px
    font-weight 600
    line-height 1.4
    color rgba(255 255 255 90%)

  &__desc
    font-size: 28px;
    color: rgba(255 255 255 60%)

// 解决方案
#solve-container
  position relative
  height 100vh
  margin-top 100vh

.solve-title
  position absolute
  top 190px
  left 7%
  z-index 2

  @screen sm
    &
      margin-bottom 10px
      font-size 32px
      color #333
  @screen md
    &
      margin-bottom 10px
      font-size 34px
      color #fff
  @screen xl
    &
      margin-bottom 10px
      font-size 38px
  @screen xxl
    &
      margin-bottom 14px
      font-size 55px

.solve-desc
  position absolute
  top 46%
  left 7%

  &-title
    position relative
    display inline-block
    margin-bottom 20px
    font-size 30px
    font-weight bold
    color #fff

    > i
      position absolute
      bottom 0
      left 50%
      font-size 110px
      font-style normal
      font-weight bold
      line-height 0.8
      color rgba(255, 255, 255, .18)
      transform translateX(-50%)

  &-more
    display flex
    justify-content space-between;
    width 148px
    padding 8px 20px
    font-size 14px
    color #fff
    border 1px solid #fff

    &__icon
      position relative
      width 18px
      height 18px
      padding 2px
      background #fff
      border-radius 50%

#solve-item
  position absolute
  bottom 10%
  left 8%
  width 84%

  .swiper-slide-thumb-active
    .solve-item-card
      background #453780

.solve-item-slide
  display flex
  align-items center
  justify-content space-between
  background rgba(250,250,250,20%)
  transition all .48s
  @apply backdrop-blur-sm

  @screen md
    &
      padding 30px 20px
  @screen xl
    &
      padding 30px 25px
  @screen xxl
    &
      padding 42px 48px

  &__title
    margin-bottom 10px
    font-size 24px
    font-weight bold
    line-height 1
    color #fff

  &__desc
    font-size 16px
    font-style normal
    color rgba(255,255,255,60%)

  &__icon
    width 38px
    height 38px
    object-fit contain

.solve-item-button
  position absolute
  top 50%
  z-index 2
  width 55px
  transform translateY(-50%)

  &.next
    right -100px

  &.prev
    left -100px

#product-center
  position relative
  width 100%
  padding 98px 0
  overflow hidden
  background-color #fff

.product-center-bg
  position absolute
  top -5%
  right 0
  font-size 358px
  font-weight 600
  line-height 0.8
  color rgba(233, 235, 237, 0.36)
  text-transform uppercase
  user-select none
  writing-mode tb-rl

.product-center-inner
  position relative
  width 90%
  margin 0 auto

.product-center__header
  display flex
  justify-content space-between

.product-center__title
  position relative

  > p.en
    margin-bottom 20px
    font-size 55px
    font-weight 600
    line-height 1
    color #010510
    text-transform uppercase

  > p.cn
    font-size 38px
    font-style normal
    font-weight 600
    line-height 1
    color #010510

.product-center-series
  padding-top 16px

.product-center-nav
  font-size 24px
  font-weight bold
  color #010510
  vertical-align middle

  &:not(:last-of-type):after
    display inline-block
    margin 0 10px
    font-size 24px
    color #010510
    content '/'


.product-center-navigation
  position absolute
  top 50%
  right 0
  left 0
  z-index 1
  display flex
  justify-content space-between
  transform translateY(-50%)

  &__button
    display block
    width 26px
    opacity .68

.product-center-content
  display flex
  justify-content space-between
  margin-top 48px

.product-center-main
  width 74%
  padding 0 40px
  border-radius 8px
  box-shadow 0 0 8px rgba(68, 54, 128, 0.18)

.product-center-sub
  width 25%
  padding 10px
  border-radius 8px
  box-shadow 0 0 8px rgba(68, 54, 128, 0.18)

.product-center-side
  &__content
    position relative

  &.main
    display flex
    align-items center
    justify-content space-between
    width 100%
    height auto
    padding 88px 8%
    overflow hidden
    background-image url("/image/product_center_side.png")
    background-repeat no-repeat
    background-size cover

  &.sub
    position relative
    display flex
    flex-direction column
    align-items center
    justify-content center
    width 100%
    height 100%

    .product-center-side__content
      text-align: center

    .product-center-side__legend
      position: relative;
      width: 80%;
      padding-top: 80%;
      background-image url(/image/product_center_side_legend.png)
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 50%;

  &__title
    position relative
    z-index 2
    margin-bottom 32px
    font-size 26px
    line-height 1
    color #01050F
    text-transform uppercase

    > .bg
      position: absolute
      top 50%
      left 0
      z-index -1
      width 140px
      height 140px
      opacity .48
      transform translate(-40%, -50%)

      &:before
        position absolute
        inset 0
        display block
        content ''
        background-image linear-gradient(120deg, #40327d, lightness(#40327d, 60), lightness(#40327d, 100))
        border-radius 50%

      &:after
        position absolute
        inset 30px
        display block
        content ''
        background-color #fff;
        border-radius 50%

  &__sub
    position relative
    z-index 2
    display block
    margin-bottom 64px
    font-size 24px
    font-weight bold
    line-height 1
    color rgba(1, 5, 15, 0.8)

  &__legend
    position relative
    z-index 2
    width 36%
    padding-top 36%
    background-image linear-gradient(120deg, #40327d, lightness(#40327d, 50), lightness(#40327d, 90))
    border-radius 50%

    &:after
      position absolute
      top -5%
      left -5%
      z-index 1
      width 110%
      height 110%
      content ''
      background-image url(/image/product_center_side_legend.png)
      background-repeat no-repeat
      background-size cover
      animation product-center-side-legend 4s infinite linear forwards

    > img
      position absolute
      bottom 2%
      left 0
      z-index 2
      width 100%
      height 96%
      object-fit contain
